<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品管理" name="first">
        <!-- <el-menu default-active="1-4-1" class="el-menu-vertical-demo">
          <el-menu-item  @mouseover.native="showIcon(1)" @mouseleave.native = "hideIcon(1)">
            <span slot="title">导航1</span>
            <i v-show="showIcon1" class="el-icon-edit-outline" @click="editNavigation(1)"></i>

          </el-menu-item>
          <el-menu-item @mouseover.native="showIcon(2)" @mouseleave.native = "hideIcon(2)">
            <span slot="title">导航2</span>
            <i v-show="showIcon2" class="el-icon-edit-outline" @click="editNavigation(2)"></i>
          </el-menu-item>
          <el-menu-item @mouseover.native="showIcon(3)" @mouseleave.native = "hideIcon(3)">
            <span slot="title">导航3</span>
            <i v-show="showIcon3" class="el-icon-edit-outline" @click="editNavigation(3)"></i>
          </el-menu-item>
        </el-menu> -->
        <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane label="商品管理">
      <div style="width: 900px;">
        <h2 style="float: left;">商品管理</h2>
        <span style="float: right;margin-top: 30px;"><el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  新建商品
</el-button></span>
      </div>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="商品分类" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="商品名称" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="商品描述" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
      </el-drawer>
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
</el-tab-pane>  
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  
</template>

<script>
export default {
      data() {
        var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
          dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
          ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
          drawer: false,
        direction: 'rtl',
          showIcon1: false,
      showIcon2: false,
      showIcon3:false,
      dialogVisible: false,
      editedNavigationName: '',
          tabPosition: 'left',
          activeName: 'second',
          tableData: [{
          img:'',
          name:'',
          price:'',
          count:''
        }, {
          img:'',
          name:'',
          price:'',
          count:''
        }, {
          img:'',
          name:'',
          price:'',
          count:''
        }, {
          img:'',
          name:'',
          price:'',
          count:''
        }],
        
        };
      },
      methods: {
        handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        handleClose(done) {
        this.$confirm('取消添加商品？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
        handleClick(tab, event) {
          console.log(tab, event);
        },
        showIcon(index) {
      if (index === 1) {
        this.showIcon1 = true;
      } else if (index === 2) {
        this.showIcon2 = true;
      }else if(index === 3){
        this.showIcon3 = true;
      }
    },
    hideIcon(index) {
      if (index === 1) {
        this.showIcon1 = false;
      } else if (index === 2) {
        this.showIcon2 = false;
      }else if(index === 3){
        this.showIcon3 = false;
      }
    },
    editNavigation(index) {
      this.dialogVisible = true;
      // 根据index来确定要编辑的导航
      // 可以从数据源中获取导航的名称，并将其赋值给editedNavigationName
      if (index === 1) {
        this.editedNavigationName = '导航1';
      } else if (index === 2) {
        this.editedNavigationName = '导航2';
      }
    },
    saveNavigationName() {
      // 在这里处理保存导航名称的逻辑
      // 可以将editedNavigationName的值发送到服务器进行保存
      this.dialogVisible = false;
    }
      }
    };
  
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 700px;
  }
</style>